<template>
  <z-container>
    <z-header height="28px">checkbox（多选）</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">多选状态</z-col>
        <z-col :span="10">
          <z-checkbox-group v-model="checkbox.checkbox1">
            <z-checkbox :label="3" disabled>已选中项</z-checkbox>
            <z-checkbox :label="6" disabled>未选中项</z-checkbox>
            <z-checkbox :label="7">未选中项</z-checkbox>
          </z-checkbox-group>
        </z-col>
      </z-row>
        <z-row :gutter="12">
        <z-col :span="3">按钮类型</z-col>
        <z-col :span="4">
          <z-checkbox-group v-model="checkbox.checkbox2">
            <z-checkbox-button label="北京"></z-checkbox-button>
            <z-checkbox-button label="上海"></z-checkbox-button>
            <z-checkbox-button label="广州"></z-checkbox-button>
          </z-checkbox-group>
        </z-col>
        <z-col :span="4" >
            <z-checkbox-group v-model="checkbox.checkbox3" disabled>
            <z-checkbox-button label="北京"></z-checkbox-button>
            <z-checkbox-button label="上海"></z-checkbox-button>
            <z-checkbox-button label="广州"></z-checkbox-button>
          </z-checkbox-group>
        </z-col>
        <z-col :span="4">
            <z-checkbox-group v-model="checkbox.checkbox4" size="large">
            <z-checkbox-button label="北京" ></z-checkbox-button>
            <z-checkbox-button label="上海" disabled></z-checkbox-button>
            <z-checkbox-button label="广州"></z-checkbox-button>
          </z-checkbox-group>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">checkbox加边框</z-col>
        <z-col :span="5">
            <z-checkbox label="已选中项" border v-model="checkbox.checkbox5"></z-checkbox>
            <z-checkbox label="未选中项" border v-model="checkbox.checkbox6"></z-checkbox>
        </z-col>
        <z-col :span="10">
          <z-checkbox-group v-model="checkbox.checkbox7" size="large">
            <z-checkbox label="北京" border disabled></z-checkbox>
            <z-checkbox label="上海" border ></z-checkbox>
            <z-checkbox label="广州" border disabled></z-checkbox>
          </z-checkbox-group>
        </z-col>
      </z-row>
    </z-main>
  </z-container>
  
  
</template>
<script>
export default{
  name:'cCheckbox',
  data(){
    return {
       checkbox:{
          checkbox1:[3],
          checkbox2:['北京'],
          checkbox3:['北京'],
          checkbox4:['北京'],
          checkbox5:true,
          checkbox6:false,
          checkbox7:['北京'],
        },
    }
  }
}
</script>